<template>
    <div class="instance-management">
      <h1>实例应用管理</h1>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>Redis 实例列表</span>
            <el-button type="primary" @click="showCreateModal = true">新建实例</el-button>
          </div>
        </template>
        <el-table :data="instances" style="width: 100%">
          <el-table-column prop="name" label="实例名称" ></el-table-column>
          <el-table-column prop="version" label="版本号" ></el-table-column>
          <el-table-column prop="host" label="实例IP"></el-table-column>
          <el-table-column prop="port" label="实例端口"></el-table-column>
          <el-table-column prop="mode" label="运行模式"></el-table-column>
          <el-table-column prop="status" label="状态" width="180"></el-table-column>
          <el-table-column label="操作" width="220">
            <template #default="{ row }">
              <el-button size="small" @click="handleEditInstance(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDeleteInstance(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <!-- 新建实例模态框 -->
      <el-dialog v-model="showCreateModal" title="新建 Redis 实例">
        <el-form :model="newInstance" label-width="100px">
          <el-form-item label="实例名称">
            <el-input v-model="newInstance.name"></el-input>
          </el-form-item>
          <el-form-item label="版本号">
            <el-input v-model="newInstance.version"></el-input>
          </el-form-item>
          <el-form-item label="运行模式">
            <el-select v-model="newInstance.mode" placeholder="请选择">
              <el-option label="Standalone" value="standalone"></el-option>
              <el-option label="Cluster" value="cluster"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showCreateModal = false">取消</el-button>
            <el-button type="primary" @click="handleSubmitNewInstance">提交</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 删除实例确认模态框 -->
      <el-dialog
        v-model="showDeleteConfirmation"
        title="确认删除"
        :before-close="handleCloseDeleteConfirmation"
      >
        <p>请注意，您即将删除 {{ selectedInstanceToDelete.name }} 实例，请确认后操作。</p>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showDeleteConfirmation = false">取消</el-button>
            <el-button type="primary" @click="handleConfirmDeleteInstance">确认删除</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  interface Instance {
    id: number;
    name: string;
    version: string;
    mode: string;
    status: string;
    host: string;
    port: number;
  }
  
  const instances = ref<Array<Instance>>([]);
  const newInstance = ref({
    name: '',
    version: '',
    mode: '',
  });
  const showCreateModal = ref(false);
  const showDeleteConfirmation = ref(false);
  const selectedInstanceToDelete = ref<Instance | null>(null);
  
  const fetchInstances = async () => {
    // 模拟从服务器获取实例数据
    await new Promise(resolve => setTimeout(resolve, 2000));
    instances.value = [
      { id: 1, name: 'redis1', version: '6.2.5', mode: 'standalone', status: 'running', host: '10.254.0.240', port:35679},
      { id: 2, name: 'redis2', version: '6.2.5', mode: 'cluster', status: 'running' , host: '10.254.0.192', port:55679},
      { id: 3, name: 'redis3', version: '6.0.0', mode: 'standalone', status: 'stopped' , host: '10.254.0.240', port:35679},
    ];
  };
  
  const handleEditInstance = (instance: Instance) => {
    alert(`编辑实例: ${instance.name}`);
    // 这里可以弹出编辑实例的模态框
  };
  
  const handleDeleteInstance = (instance: Instance) => {
    selectedInstanceToDelete.value = instance;
    showDeleteConfirmation.value = true;
  };
  
  const handleCloseDeleteConfirmation = (done: () => void) => {
    done();
    showDeleteConfirmation.value = false;
    selectedInstanceToDelete.value = null;
  };
  
  const handleConfirmDeleteInstance = () => {
    alert(`确认删除实例: ${selectedInstanceToDelete.value?.name}`);
    // 这里可以调用 API 删除对应的实例
    handleCloseDeleteConfirmation(() => {});
  };
  
  const handleSubmitNewInstance = () => {
    alert(`提交新的实例: ${newInstance.value.name}`);
    // 这里可以调用 API 提交新的实例
    showCreateModal.value = false;
  };
  
  onMounted(() => {
    fetchInstances();
  });
  </script>
  
  <style scoped>
  .instance-management {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: 20px;
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>